const Angular = require('angular');
const app = Angular.module('graphApp', []);
import './graph.scss'
import echarts from 'echarts'
import _ from '../../../lib/lodash-vendor';
app.controller('graphCtrl', ['$scope', function ($scope) {
    $scope.title = '力导图';
    function handleNodesStyle(nodes) {
        _.forEach(nodes, function (item, index) {
            item.symbolSize = handleNodeSize(item.value);
            item.label = {
                normal: {
                    show: true,
                    // formatter: function (item) {
                    //     console.log(item);
                    //     return `{a|${item.data.name}}`
                    // },
                    // rich: {
                    //     a: {
                    //         align: 'center',
                    //         color: '#fff',
                    //         backgroundColor: 'transparent'
                    //     },
                    // }
                },
                emphasis:{
                    show: false,
                    formatter: function (item) {
                        console.log(item);
                        return `{a|${item.data.type}}`
                    },
                    rich: {
                        a: {
                            align: 'center',
                            color: '#fff',
                            backgroundColor: 'transparent',
                        }
                    }
                }
            }

            item.category = getTypeIndex(item.type);
            item.draggable = true;
            item.itemStyle = {
                normal: {
                    color: getColor(item.type)
                }
            }
        });
        return nodes;
    }
    function getColor(type) {
        var categories = getCategories();
        var colorMap = {
            ip: categories[0].color,
            protocol: categories[1].color,
            port: categories[2].color,
            unit: categories[3].color,
        }
        return colorMap[type]
    }
    function handleNodeSize(number) {
        if (number < 10) {
            return 10;
        } else if (number > 40) {
            return 40;
        }
        return number;
    }
    function handleLinksStyle(links) {
        _.forEach(links, function (item, index) {
            item.lineStyle = {
                normal: {
                    width: formatterLine(item.value)
                }
            }
        });
        return links;
    }
    function formatterLine(number) {
        if (number > 10) {
            return 10;
        }
        return number;
    }
    function getTypeIndex(type) {
        var typeMap = {
            ip: 0,
            protocol: 1,
            port: 2,
            unit: 3,
        }
        return typeMap[type];
    }
    function getCategories() {
        return [{
            name: 'IP',
            color: 'red'
        },
        {
            name: '协议',
            color: 'orange'
        },
        {
            name: '端口',
            color: 'blue'
        },
        {
            name: '资产',
            color: 'gray'
        }]
    }
    function drawForce(nodes, links, myChart) {
        nodes = handleNodesStyle(nodes);
        // links = handleLinksStyle(links);
        links = [];
        var categories = getCategories()
        var option = {
            title: {
                text: 'Les Miserables',
                subtext: 'Default layout',
                top: 'bottom',
                left: 'right'
            },
            tooltip: {},
            legend: [{
                type: 'scroll',
                data: categories.map(function (a) {
                    return a.name;
                }),
                textStyle: {
                    color: '#fff'
                },
                icon: 'circle',
            }],
            color: categories.map(function (a) {
                return a.color;
            }),
            animation: false,
            series: [
                {
                    name: 'Les Miserables',
                    type: 'graph',
                    layout: 'force',
                    data: nodes,
                    links: links,
                    roam: true,
                    label: {
                        position: 'right'
                    },
                    categories: categories,
                    force: {
                        initLayout: 'circular',
                        edgeLength: 100,
                        repulsion: 100,
                        gravity: 0.1
                    }
                }
            ]
        };

        myChart.setOption(option);
    }

    function getData() {
        var nodes = [{
            name: '1.1.1.1',
            value: 25,
            type: 'ip'
        }, {
            name: '1.1.1.2',
            value: 20,
            type: 'ip'
        }, {
            name: '1.1.1.3',
            value: 20,
            type: 'ip'
        }, {
            name: '1.1.1.4',
            value: 20,
            type: 'ip'
        }, {
            name: 'http',
            value: 20,
            type: 'ip'
        }, {
            name: 'https',
            value: 20,
            type: 'protocol'
        }, {
            name: 'tcp',
            value: 20,
            type: 'protocol'
        }, {
            name: 'udp',
            value: 20,
            type: 'protocol'
        }, {
            name: '80',
            value: 20,
            type: 'port'
        }, {
            name: '8080',
            value: 20,
            type: 'port'
        }, {
            name: '20',
            value: 20,
            type: 'port'
        }, {
            name: 'unit1',
            value: 20,
            type: 'unit'
        }, {
            name: 'unit2',
            value: 20,
            type: 'unit'
        }, {
            name: 'unit3',
            value: 20,
            type: 'unit'
        }, {
            name: 'unit4',
            value: 20,
            type: 'unit'
        }]
        var links = [{
            source: '1.1.1.1',
            target: 'http',
            value: 5
        }, {
            source: '1.1.1.1',
            target: 'https',
            value: 10
        }, {
            source: '1.1.1.1',
            target: 'tcp',
            value: 5
        }, {
            source: '1.1.1.1',
            target: 'udp',
            value: 5
        }, {
            source: 'http',
            target: '80',
            value: 5
        }, {
            source: '80',
            target: 'unit1',
            value: 5
        }, {
            source: '8080',
            target: 'https',
            value: 15
        }, {
            source: '8080',
            target: 'unit2',
            value: 20
        }, {
            source: 'tcp',
            target: '20',
            value: 10
        }];
        drawForce(nodes, links, $scope.forceChart);
    }
    function init() {
        $scope.forceChart = echarts.init($('.force-container')[0]);
    }
    init();
    getData();
}])
